<html>
    <head>
        <title>红包</title>
        <style>
            *{
                padding: 0px;
                margin: 0px;
            }

            .bao{
                position: absolute;
                top: -40px;
                left: 0px;
                width: 240px;
                height: 40px;
            }

            .three{
                position: absolute;
                top: 0px;
                left: 0px;
                height: 40px;
                width: 238px;
                background-image: url("红包.png");
                background-position: 0px 0px;
                background-repeat: no-repeat;
                animation: p 0.1s 2;
                transition-property: none;
            }

            @keyframes p {
                0%{background-position: 0px 0px;}
                50%{background-position: 0px -40px;}
                100%{background-position: 0px -80px;}
            }
        </style>
    </head>
    <body>
        <div style="margin-top: 40px;position: absolute;">
            <div class="bao">
                <span class="three"></span>
            </div>
        </div>
    </body>
</html>